<template>
  <div class="containerContent">
    <div class="default">
      <el-form :model="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-row :gutter="24">
          <el-col :span="10">
            <el-form-item label="公司名称" prop="name">
              <el-input type="text" v-model="ruleForm.companyName" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <div class="logtxt">
              <div class="txt1">注册时间：{{ ruleForm.registerDate }}</div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="10">
            <el-form-item label="启用时间">
              <div style="display: flex">
                <el-date-picker
                  v-model="ruleForm.enableDate"
                  type="date"
                  disabled
                  placeholder="选择日期"
                  style="height: 40px; width: 160px; min-width: 160px"
                ></el-date-picker>
                <div class="txt">单据生成后启用时间不可修改</div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <div class="logtxt">
              <div class="txt1">
                账套使用期限：<span v-if="ruleForm.registerDate">{{
                  `${ruleForm.registerDate} ~ ${ruleForm.periodOfUse}
                剩余：${ruleForm.remainingDays}天`
                }}</span>
              </div>
              <div style="display: flex; align-items: center">
                <el-button
                  :disabled="ruleForm.buyType == 1"
                  v-if="isLeader == 1 && ruleForm.remainingDays < 30"
                  size="mini"
                  type="warning"
                  @click="toBuy"
                  >{{ buyTitle }}</el-button
                >
                <el-button v-if="isLeader == 1" size="mini" @click="toHistory" class="lastButton">购买记录</el-button>
                <el-button size="mini" @click="toRewards" class="lastButton">奖励记录</el-button>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="10">
            <el-form-item label="默认仓库">
              <el-select
                v-model="ruleForm.defaultStorehouse"
                placeholder="请选择"
                size="small"
                class="defalutWarehouse"
              >
                <el-option
                  v-for="item in storehouseList"
                  :key="item.id"
                  :label="item.storehouseName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <div class="logtxt">
              <div class="txt1" v-if="isBaseVersion || ruleForm.userNumber > 100">用户数：不限</div>
              <div class="txt1" v-else>用户数：{{ userCount }}/{{ ruleForm.userNumber }}</div>
              <div v-if="isLeader == 1">
                <el-button size="mini" type="warning" @click="toStaffInfo">编辑</el-button>
                <el-button size="mini" type="warning" @click="toPreClass">升级</el-button>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="10">
            <el-form-item label="币种符号">
              <j-dict-select-tag
                type="select"
                dictCode="currency_type"
                style="width: 100%"
                v-model="ruleForm.currencyType"
                placeholder="请选择币种符号"
              ></j-dict-select-tag>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="10">
            <div class="logtxt">
              <div class="txt1">一键备份账套数据（单据限制：{{ruleForm.accountBookDataLimit}}条/年）</div>
              <el-button v-if="isLeader == 1" size="mini" type="warning" @click="toCloud">升级</el-button>
            </div>
          </el-col>-->
          <el-col :span="10">
            <div class="logtxt">
              <div class="txt1">操作日志</div>
              <el-button size="mini" class="lastButton" @click="toOperationLog">查看</el-button>
            </div>
          </el-col>
          <el-col :span="10" v-if="showShopRenew">
            <div class="logtxt">
              <div class="txt1">
                {{ ruleForm.appletType == 10 ? '小程序商城' : '分销商城'
                }}{{ ruleForm.appletBuyType == 2 ? '租赁' : '买断' }}
              </div>
              <el-button v-if="showRenewBtn" size="mini" type="warning" @click="appletToBuy">续费</el-button>
            </div>
          </el-col>
        </el-row>
        <!-- <el-row :gutter="24">
          <el-col :span="10">
            <div class="logtxt">
              <div class="txt1"></div>
            </div></el-col>
        </el-row>-->
        <el-row :gutter="24">
          <el-col :span="7" style="margin-left: 30px">
            <el-image
              :src="require('@/assets/invite_img.png')"
              style="width: 180px; height: 113px"
              @click="handleInvite()"
            ></el-image>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="20">
            <div class="bottom_item">
              <el-button type="primary" @click.stop="onAddSubmit" style="margin-right: 20px">保存</el-button>
              <el-button @click.stop="onCancel" style="margin-left: 20px">取消</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
// import { axios } from '@/utils/request'
import { getAction, postAction } from '@/api/manage'
import Vue from 'vue'
import { USER_INFO, ACCOUNT_BOOK } from '@/store/mutation-types'
import { handleIsBaseVersion } from '../../../../utils'

export default {
  props: {
    bookDetail: Object,
  },
  data() {
    return {
      ruleForm: {},
      value: '主仓库',
      money: 'RMB￥',
      value1: 0,
      storehouseList: [],
      userCount: 0,
      isLeader: null,
      buyTitle: '购买',
      showRenewBtn: false, // 是否显示商城续费按钮
      isBaseVersion: false,
    }
  },
  watch: {
    bookDetail(val) {
      let defaultStorehouse = val.defaultStorehouse
      val.defaultStorehouse = undefined
      this.ruleForm = Object.assign({}, val)
      if (this.ruleForm.buyType) {
        this.buyTitle = '续费'
      } else {
        this.buyTitle = '购买'
      }
      this.getIsLeader()
      this.getStorehouseList(defaultStorehouse)
      this.getActiveUser()
      if (this.ruleForm.appletBuyType == 2) {
        // 商城租赁
        this.getAppletInfo()
      } else if (this.ruleForm.appletBuyType == 1) {
        // 商城买断
        if (this.ruleForm.appletType == 10) {
          // 小程序商城买断
          this.showRenewBtn = true
        } else {
          // 分销商城买断
          this.showRenewBtn = false
        }
      }
    },
  },
  mounted() {
    this.isBaseVersion = handleIsBaseVersion()
    console.log(this.isBaseVersion);
    
  },
  computed: {
    rangeDate() {
      let start = this.ruleForm.registerDate
      let end = this.ruleForm.periodOfUse
      if (!end || !start) {
        return ''
      }
      let ns = start.replace(/-/g, '.')
      let es = end.replace(/-/g, '.')

      let nD = new Date().getTime() / 1000
      let eD = new Date(end).getTime() / 1000

      let diff = Number((eD - nD) / (24 * 60 * 60)).toFixed(0)
      if (diff < 0) diff = 0

      return `${ns} - ${es} 剩余：${diff}天`
    },
    // 是否显示小程序商城信息
    showShopRenew() {
      // 账套所有人
      if (this.isLeader == 1) {
        // 配置了商城
        if (this.ruleForm.appletOfUse) {
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    },
  },
  methods: {
    add0(number) {
      if (number < 0) return ''
      if (number < 10) {
        return '0' + number
      } else {
        return number
      }
    },
    // 获取是否是leader
    getIsLeader() {
      let userInfo = Vue.ls.get(USER_INFO)
      getAction('/accountbookusing/xghAccountBookUserUsing/getUserIsLeader', {
        xghAccountBookId: this.ruleForm.id,
        userId: userInfo.id,
      }).then((res) => {
        this.isLeader = res.result
      })
    },

    getStorehouseList(defaultStorehouse) {
      // 获取仓库列表数据
      let params = { accountBookId: this.ruleForm.id }
      getAction('/xghStorehouse/xghStorehouse/queryListByPole', params).then((res) => {
        if (res.code === 200) {
          this.storehouseList = res.result
          let h = this.storehouseList.some((item) => item.id == defaultStorehouse)
          if (h) {
            this.ruleForm.defaultStorehouse = defaultStorehouse
          }
        } else {
          this.$elMessage({
            showClose: true,
            message: res.message,
            type: 'error',
            iconClass: 'el-icon-warning-outline',
            duration: 3000,
          })
        }
      })
    },
    getActiveUser() {
      getAction('/accountbookinfo/xghAccountBook/countAccountBookAllowLoginUser', {
        accountBookId: this.ruleForm.id,
      }).then((res) => {
        if (res.code === 200) {
          this.userCount = res.result || 0
        } else {
          this.$elMessage.success(res.message)
        }
      })
    },
    // 判断续费是否展示
    getAppletInfo() {
      let userInfo = Vue.ls.get(USER_INFO)
      getAction('/xghRequestForm/xghRequestForm/getAppletInfo', {
        accountBookId: this.ruleForm.id,
        phone: userInfo.username,
        appletOfUse: this.ruleForm.appletOfUse,
      }).then((res) => {
        if (res.success) {
          if (res.result.renew <= 3) {
            this.showRenewBtn = true
          } else {
            this.showRenewBtn = false
          }
        }
      })
    },
    // 小程序商城续费
    appletToBuy() {
      this.$router.push({
        path: '/shopManage/buyShop',
      })
    },
    onAddSubmit() {
      if (!this.isLeader) {
        this.$elMessage.error('账套持有人才能修改!')
      } else if (!this.ruleForm.companyName) {
        this.$elMessage.error('请输入公司名称!')
      } else {
        this.$emit('onAddSubmit', this.ruleForm)
      }
    },
    onCancel() {
      this.$emit('onCancel')
    },
    // 编辑 跳转到员工信息，对员工信息可以进行权限设置
    toStaffInfo() {
      this.$router.push('/baseInfomation/material/staffInfo')
    },
    // 续费 跳到产品购买页
    toBuy() {
      this.$router.push({
        // path: '/setting/buy/selectVersion',
        path: '/setting/buy/accountBookPay',
        query: {
          id: this.ruleForm.id,
        },
      })
    },
    toHistory() {
      this.$router.push({
        name: 'purchase-history',
        query: {
          id: this.ruleForm.id,
        },
      })
    },
    toRewards() {
      this.$router.push({
        path: '/ManagementZT/RewardRecords',
        query: {
          id: this.ruleForm.id,
        },
      })
    },
    // 升级 跳到用户购买页
    toPreClass() {
      if (!this.ruleForm.buyType || this.ruleForm.remainingDays <= 0) {
        this.$elMessage.warning('请先购买账套，才能升级用户数！')
        return
      }
      this.$router.push({
        // path: '/setting/buy/selectUser',
        path: '/setting/buy/upgradeUserNo',
        query: {
          id: this.ruleForm.id,
        },
      })
    },
    // 云备份 跳到备份购买页
    toCloud() {
      this.$router.push({
        path: '/setting/buy/selectCloud',
        query: {
          id: this.ruleForm.id,
        },
      })
    },
    // 操作日志 跳到操作日志页
    toOperationLog() {
      this.$router.push({
        name: 'home-operationLog',
        params: {
          accountBookId: this.ruleForm.id,
        },
      })
    },
    handleInvite() {
      const bookId = this.ruleForm.id
      let url = 'https://yun.xiangguohe.cn/invite/?abCode=' + bookId
      // let url = 'http://192.168.2.65:9047/invite/?abCode=' + bookId
      // console.log(url);
      window.open(url)
    },
  },
}
</script>

<style lang="scss" scoped>
// .containerContent {
//   display: flex;
// }
// ::v-deep .el-input__inner {
//   width: 4.31277rem;
//   height: 0.562535rem;
// }
.default {
  font-size: 0.225014rem;
  color: #6666;
  width: 100%;
  margin-left: -25px;
}

// ::v-deep .el-form-item__label {
//   font-size: 12px;
// }
// .el-date-editor ::v-deep .el-input__inner {
//   width: 100%;
//   height: 100%;
// }
.txt {
  color: #fd6c21;
  font-size: 12px;
  margin-left: 20px;
  // width: 3.543971rem;
  // height: 0.31877rem;
}

// ::v-deep .el-date-editor {
//   width: 2.325145rem;
//   height: 0.562535rem;
// }
// .el-input--suffix .el-input__inner {
//   width: 4.31277rem;
//   height: 0.562535rem;
// }
// .log {
//   width: 7.500469rem;
//   margin-left: 1.875117rem;
// }
// .logtxt:first-child {
//   margin-top: 0.093756rem;
// }
.logtxt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  color: #666666;
  margin-left: 30px;
  font-size: 12px;
}

// .txt {
//   margin-left: 0.018751rem;
// }
// .txt1 {
//   font-size: 0.225014rem;
//   color: #666666;
// }
// .el-button {
//   border-radius: 0.093756rem;
//   background: #fb7a22;
// }
// .lastButton {
//   background: none;
//   border: 0.018751rem solid #1b94fb;
//   color: #1993fb;
// }
// .rules {
//   color: rgb(255, 47, 79);
//   position: absolute;
//   left: -0.150009rem;
//   top: 0.037502rem;
// }
// input {
//   width: 5.962873rem;
//   border: 0.018751rem solid #ddd;
//   height: 0.562535rem;
//   border-radius: 0.093756rem;
//   padding-left: 1em;
// }
// input:focus {
//   outline: none;
//   border: 1px solid #409eff;
// }
// .el-date-picker {
//   text-align: right;
// }
// ::v-deep .el-icon-date {
//   margin-left: 90px;
// }
// ::v-deep .el-input--prefix .el-input__inner {
//   padding-left: 0.187512rem;
// }
.bottom_item {
  margin: 30px 0;
  width: 100%;
  text-align: center;

  .el-button {
    padding: 6px 20px;
  }
}
</style>